import 'dart:math';

import 'package:flutter/material.dart';

/// `文字描述`
class ContentCard extends StatelessWidget {
  final String color;
  final Color altColor;
  final String title;
  final String subtitle;
  final int current;
  final void Function(int) onChange;
  const ContentCard({
    Key key,
    this.color,
    this.altColor,
    this.title,
    this.subtitle,
    this.current,
    this.onChange,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var size = MediaQuery.of(context).size;
    var time = DateTime.now().millisecondsSinceEpoch / 2000;
    var scaleX = 1.2 + sin(time) * .05;
    var scaleY = 1.2 + cos(time) * .07;
    var offsetY = 20 + cos(time) * 20;
    return Stack(
      alignment: Alignment.center,
      fit: StackFit.expand,
      children: <Widget>[
        // 🔰 背景图
        Transform(
          transform: Matrix4.diagonal3Values(scaleX, scaleY, 1),
          child: Transform.translate(
            offset: Offset(
              -(scaleX - 1) / 2 * size.width,
              -(scaleY - 1) / 2 * size.height + offsetY,
            ),
            child: Image.asset(
              'assets/images/guide/Bg-$color.png',
              fit: BoxFit.cover,
              // package: App.pkg,
            ),
          ),
        ),
        Container(
          alignment: Alignment.center,
          child: Padding(
            padding: const EdgeInsets.only(top: 75.0, bottom: 25.0),
            child: Column(
              children: <Widget>[
                // 🔰 Top Image
                Expanded(
                  flex: 3,
                  child: Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 20.0),
                    child: Image.asset(
                      'assets/images/guide/Illustration-$color.png',
                      fit: BoxFit.contain,
                      // package: App.pkg,
                    ),
                  ),
                ),

                // 🔰 Slider circles
                Container(
                  height: 14,
                  child: Image.asset(
                    'assets/images/guide/Slider-$color.png',
                    // package: App.pkg,
                  ),
                ),

                // 🔰 Bottom content
                Expanded(
                  flex: 2,
                  child: Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 18.0),
                    child: _buildBottomContent(),
                  ),
                ),
              ],
            ),
          ),
        )
      ],
    );
  }

  Widget _buildBottomContent() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: <Widget>[
        Text(
          title,
          textAlign: TextAlign.center,
          style: TextStyle(
            height: 1.2,
            fontSize: 30.0,
            fontFamily: 'DMSerifDisplay',
            color: Colors.white,
            // package: App.pkg,
          ),
        ),
        Text(
          subtitle,
          textAlign: TextAlign.center,
          style: TextStyle(
            fontSize: 14.0,
            fontWeight: FontWeight.w300,
            fontFamily: 'OpenSans',
            color: Colors.white,
            // package: App.pkg,
          ),
        ),
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 36.0),
          child: MaterialButton(
            elevation: 0,
            shape:
                RoundedRectangleBorder(borderRadius: BorderRadius.circular(50)),
            color: altColor,
            child: Padding(
              padding: const EdgeInsets.symmetric(vertical: 16.0),
              child: Text(
                current == 2 ? '去首页' : '下一步',
                style: TextStyle(
                  fontSize: 16,
                  letterSpacing: .8,
                  fontFamily: 'OpenSans',
                  fontWeight: FontWeight.w600,
                  color: Colors.white,
                  // package: App.pkg,
                ),
              ),
            ),
            onPressed: () {
              onChange(current);
            },
          ),
        ),
      ],
    );
  }
}
